import 'package:calf_account/model/pass_tag.dart';
import 'package:calf_account/model/password.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'logic.dart';

class PassPage extends StatelessWidget {
  const PassPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("密码册"),
      ),
      endDrawer: Drawer(
        child: _buildTagView(),
      ),
      body: Container(
        color: const Color(0xFFFBFCFF),
        width: 400,
        child: Column(
          children: [
            /*搜索框*/
            _buildSearchView(),
            /*列表*/
            Expanded(
              child: GetBuilder<PassLogic>(
                id: "passListView",
                builder: (controller) =>
                    _buildPassListView(controller.passwords),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 构建搜素框
  Widget _buildSearchView() {
    return Center(
      child: Container(
        height: 40,
        padding: const EdgeInsets.all(5.0),
        margin: const EdgeInsets.only(bottom: 15),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8.0),
            boxShadow: const [
              BoxShadow(
                  color: Colors.blueGrey,
                  offset: Offset(0.0, 10.0), //阴影xy轴偏移量
                  blurRadius: 10.0, //阴影模糊程度
                  spreadRadius: 1.0 //阴影扩散程度
                  )
            ]),
        child: TextField(
          maxLines: 1,
          inputFormatters: [
            /*最大长度30*/
            LengthLimitingTextInputFormatter(30)
          ],
          decoration: InputDecoration(
            border: InputBorder.none,
            icon: const Icon(
              Icons.search,
              size: 25,
            ),
            suffixIcon: GestureDetector(
              onTap: () => {
                Get.toNamed('/addPass')
              },
              child: const Icon(
                Icons.add_circle,
                size: 25,
                color: Color(0xFF07CC38),
              ),
            ),
          ),
          onChanged: (v) => {Get.find<PassLogic>().changeSearchKey(v)},
        ),
      ),
    );
  }

  ///构建标签View
  Widget _buildTagView() {
    RefreshController _refreshController =
        RefreshController(initialRefresh: false);
    return Container(
      padding: const EdgeInsets.all(2.0),
      child: GetBuilder<PassLogic>(
        id: "tagView",
        builder: (controller) => SmartRefresher(
          enablePullDown: true,
          controller: _refreshController,
          onRefresh: () => Get.find<PassLogic>().renderTagView(),
          child: ListView.builder(
              itemExtent: 100.0,
              itemCount: controller.tags.length,
              itemBuilder: (c, index) {
                PasswordTag tag = controller.tags[index];
                return Container(
                  padding: const EdgeInsets.all(2.0),
                  color: const Color(0xFFFFFFFF),
                  child: GetBuilder<PassLogic>(
                    id: "tagViewItem" + tag.id.toString(),
                    builder: (controller1) => CheckboxListTile(
                      value: controller1.getTagStatusById(tag.id),
                      title: Text(tag.name),
                      onChanged: (bool? value) {
                        controller1.changeTagCheck(tag.id, value ?? false);
                      },
                    ),
                  ),
                );
              }),
        ),
      ),
    );
  }

  ///构建密码View
  Widget _buildPassListView(List<Password> passwords) {
    RefreshController _refreshController =
        RefreshController(initialRefresh: false);

    return Container(
      padding: const EdgeInsets.all(5.0),
      width: 390,
      child: GetBuilder<PassLogic>(
        id: "passListView",
        builder: (controller) => SmartRefresher(
          enablePullDown: true,
          controller: _refreshController,
          onRefresh: () => Get.find<PassLogic>().renderTagView(),
          child: ListView.builder(
            itemCount: passwords.length,
            itemBuilder: (BuildContext context, int index) {
              Password password = passwords[index];
              return GestureDetector(
                onLongPress: () =>
                    {Get.find<PassLogic>().changePassHandleStatus(password.id)},
                child: Container(
                  height: 185,
                  margin: const EdgeInsets.only(top: 5, bottom: 5),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF1EFEF),
                    borderRadius: BorderRadius.circular(8.0),
                    // boxShadow: const [
                    //   BoxShadow(
                    //       color: Colors.grey,
                    //       offset: Offset(0.0, 5.0), //阴影xy轴偏移量
                    //       blurRadius: 5.0, //阴影模糊程度
                    //       spreadRadius: 2.0 //阴影扩散程度
                    //       )
                    // ],
                  ),
                  padding: const EdgeInsets.all(2.0),
                  child: Column(
                    children: [
                      SizedBox(height: 30, child: _buildPassListTop(password)),
                      Center(
                        child: Container(
                            height: 120,
                            width: 350,
                            padding: const EdgeInsets.all(5),
                            decoration: BoxDecoration(
                              color: const Color(0xFFF6F5F5),
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                            child: _buildPassCenter(password)),
                      ),
                      Container(
                          height: 20,
                          margin: const EdgeInsets.only(top: 6, left: 20),
                          child: _buildPassBottom(password)),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  /*顶部密码标题，分享修改删除按钮*/
  Widget _buildPassListTop(Password password) {
    return Row(
      children: [
        Container(
          color: Colors.blue,
          width: 8,
        ),
        Container(
          padding: const EdgeInsets.only(left: 10),
          // color: const Color(0xFF07A0C3),
          width: 220,
          child: Text(
            password.title,
            maxLines: 1,
            softWrap: true,
            textAlign: TextAlign.left,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Color(0xFF086788),
            ),
          ),
        ),
        Expanded(
          child: GetBuilder<PassLogic>(
              id: "passHandel" + password.id.toString(),
              builder: (controller) {
                bool isShowHandel = controller.longPressPassId == password.id;
                return Opacity(
                  opacity: isShowHandel ? 1.0 : .0,
                  child: Row(
                    children: [
                      IconButton(
                          iconSize: 18,
                          onPressed: () =>
                              {printInfo(info: password.toString())},
                          icon: const Icon(Icons.share,
                              color: Colors.greenAccent)),
                      IconButton(
                          iconSize: 18,
                          onPressed: () =>
                              {printInfo(info: password.toString())},
                          icon:
                              const Icon(Icons.edit, color: Colors.blueAccent)),
                      IconButton(
                          iconSize: 18,
                          onPressed: () =>
                              {printInfo(info: password.toString())},
                          icon: const Icon(Icons.delete,
                              color: Colors.pinkAccent)),
                    ],
                  ),
                );
              }),
        )
      ],
    );
  }

  /*密码的账户信息,复制等*/
  Widget _buildPassCenter(Password password) {
    return Column(
      children: [
        Row(
          children: [
            const SizedBox(
              width: 60,
              child: Text(
                "用户名",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
              ),
            ),
            Container(
                width: 210,
                color: const Color(0xFFDEDCDC),
                child: Text(password.name)),
            Container(
              height: 50,
              padding: const EdgeInsets.only(left: 5.0, right: 5.0),
              margin: const EdgeInsets.only(left: 5),
              child: GestureDetector(
                  onTap: () => {printInfo(info: password.toString())},
                  child: const Icon(Icons.copy, size: 16)),
            ),
          ],
        ),
        const SizedBox(height: 5),
        Row(
          children: [
            const SizedBox(
              width: 60,
              child: Text(
                "密    码",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
              ),
            ),
            Container(
              width: 210,
              color: const Color(0xFFDEDCDC),
              child: GetBuilder<PassLogic>(
                  id: "eyeText" + password.id.toString(),
                  builder: (controller) {
                    if (controller.canShowPassIds.containsKey(password.id)) {
                      return Text(password.pass);
                    } else {
                      return const Text("*********");
                    }
                  }),
            ),
            Container(
              height: 50,
              padding: const EdgeInsets.only(left: 5.0, right: 5.0),
              margin: const EdgeInsets.only(left: 5),
              child: GestureDetector(
                  onTap: () => {printInfo(info: password.toString())},
                  child: const Icon(Icons.copy, size: 16)),
            ),
            Container(
              height: 50,
              padding: const EdgeInsets.only(left: 5.0, right: 5.0),
              margin: const EdgeInsets.only(left: 5),
              child: GestureDetector(
                onTap: () =>
                    {Get.find<PassLogic>().changeEyeStatus(password.id)},
                child: GetBuilder<PassLogic>(
                    id: "eyeBtn" + password.id.toString(),
                    builder: (controller) {
                      if (controller.canShowPassIds.containsKey(password.id)) {
                        return const Icon(Icons.visibility_off, size: 16);
                      } else {
                        return const Icon(Icons.visibility, size: 16);
                      }
                    }),
              ),
            ),
          ],
        ),
      ],
    );
  }

  /*密码的标签列表*/
  Widget _buildPassBottom(Password password) {
    List<Widget> psTags = [];
    Map<int, PasswordTag> tagMaps = Get.find<PassLogic>().tagMaps;

    for (int tagId in password.tags) {
      if (tagMaps.containsKey(tagId)) {
        Widget item = Container(
          width: 60,
          padding: const EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: const Color(0xFF07A0C3),
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Center(
            child: Text(
              tagMaps[tagId]!.name,
              style: const TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
        );
        psTags.add(item);
      }
    }

    return Row(
      children: psTags,
    );
  }
}
